<template>
    <view class="content ml20 mr20">
        <view class="dis_sb mt60 mb40 ml20 mr20">
            <view class="line26">
                <view class="f34 clo-navyBlue dis_sc">
                    磅差预警
                    <view @click="open" class="clo-red f24 rad15  pl10 pr10 ml20" style="background: #d7ced9; line-height: 1.6;">
                        <text class="iconfont">&#xe600;</text>
                        设置预警
                    </view>
                </view>
                <view class="clo-gray f24">根据订单磅差统计车辆年月日磅差总数</view>
            </view>
            <image src="/static/pic4.png" mode="heightFix" style="height: 120rpx;" class="pic"></image>
        </view>
        <!-- <view class="dis_sb ml30 mr30">
            <view class="clo-999 bgfff line22 pl40 pr40 rad25t" :class="now==1?'active':''" @click="taptab(1)">年度数据</view>
            <view class="clo-999 bgfff line22 pl40 pr40 rad25t" :class="now==2?'active':''" @click="taptab(2)">月度数据</view>
            <view class="clo-999 bgfff line22 pl40 pr40 rad25t" :class="now==3?'active':''" @click="taptab(3)">昨日数据</view>
        </view> -->
        <view class="pl20 pr20 bgfff rad25 pt10 pb20">
            <!-- <div class="dis_ec">
                <view v-if="now == 1 || now == 2" class="dis_ec f28 clo-666 line16  mb10">
                    请选择年份：
                    <picker @change="bindYearChange" :value="Yindex" :range="arrayYear">
                        <view class="clo-blue pl20 pr20 b1ce rad15">{{arrayYear[Yindex]}}年</view>
                    </picker>
                </view>
                <view v-if="now==2" class="dis_ec f28 clo-666 line16 mb10 ml10">
                    请选择月份：
                    <picker @change="bindMonthChange" :value="Mindex" :range="arrayMonth">
                        <view class="clo-blue pl20 pr20 b1ce rad15">{{arrayMonth[Mindex]}}月</view>
                    </picker>
                </view>
            </div> -->
            <mescroll-uni top="0" :bottom="0" :fixed="false" height="75%" @init="mescrollInit" @down="downCallback" @up="getListFn" :down="mescrollData.downOption" :up="mescrollData.upOption">
                <div class="pt10">
                    <!-- feeeee -->
                    <view v-for="(item, index) in dataList" class="w100  rad15 pt10 pb10 dis_sb" :class="{ mt20:index>0}"
                        :style="{ backgroundColor: warnNum > 0 && item.pound_difference_ratio > warnNum ?'#fbfcff':'#fbfcff' }">
                        <view class="f24 line16 clo-999 pl20">
                            <view>卸车时间：{{ item.unload_date}}</view>
                            <view>车号：{{ item.car_code||'无' }}</view>
                            <view>司机：{{ item.driver_name || '无' }}</view>
                            <view>装车单位：{{ item.loading_unit_name }}</view>
                            <view>装车吨数：{{ item.loading_weight }}吨</view>
                            <view v-if="item.pass_loading_unit_id">途经点：{{ item.pass_loading_unit_name }}</view>
                            <view v-if="item.pass_loading_unit_id">途经点装车吨数：{{ item.pass_loading_weight }}吨</view>
                            <view>卸车单位：{{ item.unload_unit_name }}</view>
                            <view>卸车吨数：{{ item.unload_weight }}吨</view>

                        </view>
                        <view class="tac pr20">
                            <view class="clo-orange f34 fwb">{{ item.pound_difference }}</view>
                            <view class="f28">磅差(吨)</view>
                            <view class="clo-orange f34 fwb mt10">{{ item.pound_difference_ratio }}%</view>
                            <view class="f28">磅差占比</view>
                        </view>
                    </view>
                </div>
            </mescroll-uni>

        </view>

        <uni-popup ref="popup" type="center">
            <view class="bgfff rad25 tac pt20 pb20 line22">
                <view class="iconfont clo-red" style="font-size: 50rpx;">&#xe663;</view>
                <view class="f28 clo-orange">设置预警参数值</view>
                <view class="line f34 dis_sb">
                    <input type="text" v-model="warnNumInput" @input="warn_keyup" placeholder="请输入" />
                    <text>%</text>
                </view>
                <view class="dis_sb ml30 mr30 mt20">
                    <button class="butredkong " @click="close">取消</button>
                    <button class="bbg" @click="confirm">确认</button>
                </view>
            </view>
        </uni-popup>
    </view>
</template>

<script setup>
import { ref, reactive, toRefs, onMounted, computed, onUnmounted, getCurrentInstance, nextTick } from 'vue'
import useMescroll from '@/uni_modules/mescroll-uni/hooks/useMescroll.js';
import { onLoad, onPageScroll, onReachBottom } from '@dcloudio/uni-app';
import { img, redirect, filterDecimal } from '@/utils/common'

import { getPoundDifferenceWarningList } from '@/utils/api'
const { proxy } = getCurrentInstance();
proxy.$checkUserType();
const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom);
const now = ref(1)
const Yindex = ref(0)
const Mindex = ref(0)
const arrayMonth = ref(['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12']);
const arrayYear = computed(() => {
    let endYear = new Date().getFullYear();
    let startYear = 2022;
    let arr = [];
    while (endYear >= startYear) {
        arr.push(endYear)
        endYear--;
    }
    return arr;
});
const warnNumInput = ref('');
const warnNum = ref(0);
onMounted(()=>{
    let warn_num = uni.getStorageSync('warn_num');
    if (warn_num){
        warnNum.value = warn_num;
        warnNumInput.value = warn_num;
    }else{
        warnNumInput.value = '';
    }
})
const dataList = ref([])
const searchParam = reactive({
    warning: ''
})

const popup = ref(null)
const open = ()=>{
    popup.value.open('center')
}
const close = ()=>{
    popup.value.close()
}
const confirm = ()=>{
    let warn_num = warnNumInput.value;
    if (warn_num){
        warnNum.value = warn_num;
        uni.setStorageSync('warn_num', warn_num)
    }
    popup.value.close()
    getMescroll().resetUpScroll();
}
const bindYearChange = (e)=>{
    Yindex.value = e.detail.value
    dataList.value = [];
    getMescroll().resetUpScroll();
}
const bindMonthChange = (e)=>{
    Mindex.value = e.detail.value
    dataList.value = [];
    getMescroll().resetUpScroll();
}

const taptab = (e)=>{
    now.value = e
    searchParam.type = e
    dataList.value = [];
    getMescroll().resetUpScroll();
}


const mescrollData = reactive({
    downOption: {},
    upOption: {
        page: {
            size: 10 // 每页数据的数量
        },
        noMoreSize: 5, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
        empty: {
            tip: '~ 暂无数据 ~' // 提示
        }
    }
})

const getListFn = (mescroll) => {
    searchParam.warning = warnNumInput.value
    let data = {
        page: mescroll.num,
        pageSize: mescroll.size,
        ...searchParam
    };
    let showLoading = false;
    if (mescroll.num == 1) {
        showLoading = true;
    }
    getPoundDifferenceWarningList(data, showLoading).then((res) => {
        let curPageData = res.data.car_list || [];
        // let totalSize = res.data.count;
        //设置列表数据
        if (mescroll.num == 1) {
            dataList.value = [];
        }
        dataList.value = dataList.value.concat(curPageData);
        mescroll.endSuccess(curPageData.length);
        // mescroll.endBySize(curPageData.length, totalSize);
    }).catch(() => {
        mescroll.endErr(); // 请求失败, 结束加载
    })
}

const warn_keyup =(e)=>{
	console.log('warn_keyup',e)
    nextTick(()=>{ 
        warnNumInput.value = filterDecimal(e.detail.value)
    })
}
</script>

<style>
	.active{color: #3174fb; border-bottom: 1px solid #3174fb;}
	.tit::after {top: 12%;}
	.main {height: 75vh; overflow-y: auto;}
	
	.line {width: 300rpx; padding: 0 50rpx;}
	.line input {border-bottom: 1px solid #aaa;}
</style>
